<template>
  <div>
    <van-nav-bar title="登录" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-image width="10rem" height="10rem" fit="contain" class="img"
      src="https://img.cwiyc.top/logo.png" />
    <van-form @failed="onFailed" @submit="onSubmit">
      <van-cell-group inset>
        <van-field v-model="value1" name="account" label="账号" placeholder="请输入账号"
          :rules="[{ pattern: patternAcc, message: '请使用邮箱登录' }]" />
        <van-field v-model="value2" name="password" label="密码" placeholder="请输入密码"
          :rules="[{ pattern: patternPas, message: '4到16位(字母,数字,下划线,减号)' }]" />
      </van-cell-group>
      <van-field name="switch" label="商家">
        <template #input>
          <van-switch v-model="checked" size="20" />
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
    <div style="position:relative;left:13rem;" @click="toRegister">还没账号?点此注册</div>
  </div>
</template>

<script lang="ts">
import { NavBar, Form, Field, CellGroup, Toast, Image as VanImage, Notify } from 'vant';
import bus from 'vue3-eventbus'
import { ref,onMounted } from 'vue'
import { useRouter } from 'vue-router'
const request = require('@/network/request').default;
export default {
  name: 'Login',
  props: [],
  setup(props, context) {
    const onClickLeft = () => history.back();
    const value1 = ref('');
    const value2 = ref('');
    const patternAcc = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/; //表单验证的正则表达式
    const patternPas = /^[a-zA-Z0-9_-]{4,16}$/;

    const onFailed = (errorInfo) => {
      console.log('failed', errorInfo);
    };
    const onSubmit = (values) => {
      // console.log('submit', values);
      login(values)
    };
    const toRegister=()=>{
      router.push('/register')
    }
    onMounted(()=>{
      bus.emit('isShop', { isShop: false})
    })
    function login(values) {
      let user = {
        type: values.switch ? 0 : 1,
        nickname: values.account,
        password: values.password,
      }
      request.post('/login', user).then(res => {
        console.log(res)
        if (res.code == -1) {
        } else if (res.code == 0) {
          let user1 = {
            nickname: values.account
          }
          request.post('/getuser', user1).then(res => {
            console.log(res)
            let role = 0
            if (values.switch == true) {
              role = 0
            } else {
              role = 1
            }
            res.data.password = ''
            res.data.type = role
            if (res.code == -1) {
              console.log(res)
            } else if (res.code == 0) {
              localStorage.setItem('userInfo', JSON.stringify(res.data))

              setTimeout(() => {
                if (role == 0) {
                  bus.emit('isShop', { isShop: true})
                  router.push('/handleorders')
                } else {
                  bus.emit('isShop', { isShop: false })
                  router.push('/')
                }
              }, 1000);
            }
          })
        }
      })
    }
    const router = useRouter();
    function goto() {
      router.push('/')
    }
    const checked = ref(false);
    return {
      value1,
      value2,
      onFailed,
      patternAcc,
      patternPas,
      onClickLeft,
      checked,
      onSubmit,
      toRegister
    };
  },
}
</script>

<style scoped lang="scss">
.notify {
  height: 5rem;
  position: absolute;
}

#toast {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.img {
  position: relative;
  left: 50%;
  transform: translate(-50%);
}
</style>
